<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1"/>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base target="_top" />
<title>创新评测设置</title>
	<link href="<%=basePath%>css/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="<%=basePath%>css/basic.css" type="text/css" rel="stylesheet" />
	<link href="<%=basePath%>css/evaluationOption.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>css/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/nstl.validate.js"></script>


 	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<body style="overflow-y: scroll">
<div class="top">
	<div class="container">
		<img alt="140x140" src="<%=basePath%>images/logo.jpg"/>
	</div>
</div>
<div class="row show-grid daohang">
	<div class="container">
		<div class="daohang-name"><a href="<%=basePath%>page/new.jsp"><strong>评测首页</strong></a></div>
		<div class="daohang-name"><a href="<%=basePath%>template/getTemplateAll"><strong>模板列表</strong></a></div>
		<div class="daohang-name this"><strong>评测设置</strong></div>
	</div>
</div>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<h3 class="text-center">
				<strong>评测设置</strong>
			</h3>
			<div class="row clearfix">
				<div class="col-md-12 column">
					<form action="<%=basePath %>template/saveTemplate" method="post">
						<input class="form-control" type="hidden" name="id" value="${template.id}"/>
						<div class="control">
							<div class="col-md-6 input"><label>模板名字</label><input class="form-control" type="text" name="templateName" value="${template.templateName}"/></div>
							<div class="col-md-6 input"><label>模板描述</label><input class="form-control" type="text" name="description" value="${template.description}"/></div>
						</div>
						<div class="control">
							<div class="col-md-12"><input class="checked-all" type="checkbox" onchange="toggleChecked(this)">全选</div>
						</div>
						<c:forEach items="${categoryList}" var="category">
							<c:set var="isContains" value="false"/>
							<c:forEach var="detail" items="${details}">
								<c:if test="${detail.categoryId == category.id}">
									<c:set var="isContains" value="true"/>
									<div class="control">
										<input class="form-control" type="hidden" name="detailIds" value="${detail.id}"/>
										<div class="col-md-6 input1">
											<input class="js-delete-detail" type="checkbox" detailId="${detail.id}" onclick="checkBox(this)" name="catid" id="${category.id}" value="${category.id}" checked>${category.description}
										</div>
										<div class="col-md-6 input2">
											<div class="col-md-4">均值:<input class="form-control notnull number" type="text" name="junzhi" value="${detail.mean}"/></div>
											<div class="col-md-4">方差:<input class="form-control notnull number" type="text" name="fangcha" value="${detail.variance}"/></div>
											<div class="col-md-4">权重:<input class="form-control notnull number max" type="text" name="quanzhong" value="${detail.weight}"/></div>
										</div>
									</div>
								</c:if>
							</c:forEach>
							<c:if test="${!isContains}">
								<div class="control">
									<input class="form-control" type="hidden" value=""/>
									<input class="form-control" type="hidden" value="Thu Jan 01 19:00:00 CST 1970"/>
									<div class="col-md-6 input1"><input type="checkbox" onclick="checkBox(this)"
																		name="catid" id="${category.id}"
																		value="${category.id}">${category.description}</div>
									<div class="col-md-6 input2">
										<div class="col-md-4">均值:<input class="form-control" type="text" readOnly="true"/></div>
										<div class="col-md-4">方差:<input class="form-control" type="text" readOnly="true"/></div>
										<div class="col-md-4">权重:<input class="form-control" type="text" readOnly="true"/></div>
									</div>
								</div>
							</c:if>
						</c:forEach>
						<div class="addAndSave-btn">
							<%--<input type="button" id="modal-923449" data-target="#addOption" data-toggle="modal" class="btn btn-info" value="添加指标"/>--%>
							<a id="modal-923449" href="#addOption" role="button" class="btn btn-info"
							   data-toggle="modal">添加指标</a>
							<div class="modal fade" id="addOption" role="dialog" aria-labelledby="myModalLabel"
								 aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											名称：<input id="addName" type="text" class="inp_txt form-control"/>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" data-dismiss="modal">关闭
											</button>
											<button type="button" class="btn btn-primary" onclick="add()">添加</button>
										</div>
									</div>
								</div>
							</div>
							<input type="submit" class="btn btn-success" value="保存模板"/>
						</div>
					</form>
				</div>
			</div>
			<hr/>
		</div>
	</div>
</div>

</body>
<script type="text/javascript">
	$(function () {
		$('form').validate('<%=basePath %>template/deleteDetail');
		$('.js-delete-detail').click(function () {
			if($(this).hasClass('delete')) {
				$(this).removeClass('delete');
			} else {
				$(this).addClass('delete');
			}
		});

	});
    function toggleChecked(obj) {
        $('.input2 input').attr('readonly', !$(obj).is(':checked'));
        $('.input1 input').prop('checked', $(obj).is(':checked'));
        if (!$(obj).is(':checked')) {
            $('.input2 input').removeAttr('name').removeClass("notnull").removeClass("number").next().remove();
        } else {
            $('.input2 input').each(function (i) {
                switch(i%3){
                    case 0:
                        $(this).attr('name','junzhi').addClass("notnull number");
                        break;
                    case 1:
                        $(this).attr('name','fangcha').addClass("notnull number");
                        break;
                    case 2:
                        $(this).attr('name','quanzhong').addClass("notnull number");
                        break;
                    default:
                        break;
                }
            })
        }
    }
	function add(){
		var addName = $("#addName").val()
		$.ajax({
			url:"addCategory",
			type:"post",
			dataType:"json",
			data:{category:addName},
			error:function (XMLHttpRequest, textStatus, errorThrown) {
				if(XMLHttpRequest.status == 500) {
					alert("该指标已存在");
					return;
				}
				alert("网络错误");
			},
			success:function (data) {
				$('<div class="control"><div class="col-md-6 input1"><input type="checkbox" onclick="checkBox(this)" name="catid" value="' + data.id + '">' + addName + '</div><div class="col-md-6 input2"><div class="col-md-4">均值:<input class="form-control" type="text" readOnly="true"/></div><div class="col-md-4">方差:<input class="form-control" type="text" readOnly="true"/></div><div class="col-md-4">权重:<input class="form-control" type="text" readOnly="true"/></div></div></div></div>').insertBefore('.addAndSave-btn');
				$('#addOption').find('input').first().val('');
				$('#addOption').hide();
			}
		});
	}
	function add() {
		var addName = $("#addName").val();
		if(addName == ""){
			alert("指标名称不能为空");
			return;
		}
		$.ajax({
			url: "addCategory",
			type: "post",
			dataType: "json",
			data: {category: addName},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				if (XMLHttpRequest.status == 500) {
					alert("该指标已存在");
					return;
				}
				alert("网络错误");
			},
			success: function (data) {
				$('<div class="control"><div class="col-md-6 input1"><input type="checkbox" onclick="checkBox(this)" name="catid" value="' + data.id + '">' + addName + '</div><div class="col-md-6 input2"><div class="col-md-4">均值:<input class="form-control" type="text" readOnly="true"/></div><div class="col-md-4">方差:<input class="form-control" type="text" readOnly="true"/></div><div class="col-md-4">权重:<input class="form-control" type="text" readOnly="true"/></div></div></div></div>').insertBefore('.addAndSave-btn');
				$('#addOption').find('input').first().val('');
				$('#addOption').hide();
				document.getElementById("modal-923449").scrollIntoView();
			}
		});
	}

	function checkBox(obj) {
		if ($(obj).is(':checked')) {
			$(obj).parent().next().find('label.error').remove();
			$(obj).parent().next().find('input').first().attr("name", "junzhi").attr("readOnly", false).addClass("notnull").addClass("number");
			$(obj).parent().next().find('input').eq(1).attr("name", "fangcha").attr("readOnly", false).addClass("notnull").addClass("number");
			$(obj).parent().next().find('input').last().attr("name", "quanzhong").attr("readOnly", false).addClass("notnull").addClass("number").removeClass("max");
			$(obj).parent().parent().find('input[type="hidden"]').first().attr("name", "detailIds");

		} else {
			$(obj).parent().next().find('label.error').remove();
			$(obj).parent().next().find('input').first().removeAttr("name").attr("readOnly", true).removeClass("notnull").removeClass("number");
			$(obj).parent().next().find('input').eq(1).removeAttr("name").attr("readOnly", true).removeClass("notnull").removeClass("number");
			$(obj).parent().next().find('input').last().removeAttr("name").attr("readOnly", true).removeClass("notnull").removeClass("number").removeClass("max");
			$(obj).parent().parent().find('input[type="hidden"]').first().removeAttr("name");
		}
	}
</script>
</html>
